<template>
  <div>
    <div class="title">选择商品</div>
    <div class="digGoods">
      <div class="digGoods__box">
        <div class="digGoods__box--top">
          <el-select v-model="showVal" style="width: 120px" placeholder="全部专区" @clear="onClear" clearable>
            <el-option-group v-for="group in showList" :key="group.index">
              <el-option :label="group.modeName" :value="group.modeName" @click.native="selectTem(group)"></el-option>
            </el-option-group>
          </el-select>
          <el-select v-model="showSecVal" placeholder="请选择分类" style="width: 120px">
            <el-option-group v-for="group in showSecList" :key="group.index">
              <el-option-group :label="group.name" :value="group.name" :key="group.id"></el-option-group>
              <el-option v-for="item in group.showCategoryVos" :key="item.name" :label="item.name" :value="item.name"
                style="margin-left: 20px" @click.native="selectGood(item)"></el-option>
            </el-option-group>
          </el-select>
          <span style="
              margin: 0px 0px 0px 50px;
              color: #a1a1a1;
              width: 34px;
              line-height: 32px;
            ">价格</span>
          <el-input style="width: 60px" v-model="search.minPrice"></el-input>
          <span style="margin: 0px 5px; line-height: 32px">-</span>
          <el-input style="width: 60px" v-model="search.maxPrice"></el-input>
          <el-input v-model="search.name" placeholder="请输入关键词" class="search-wrap-input" @click="onClear" clearable
            style="width: 180px; margin-left: 10px">
            <el-button slot="append" icon="el-icon-search" @click="searchByInput"></el-button>
          </el-input>
        </div>
        <div class="digGoods__box--content">
          <div v-for="(item, index) in goodsList" :key="index" class="digGoods__box--content--good"
            @click="chooseGood(item)" :style="{
              border: item.isCheck
                ? borderStyle.borderGet
                : borderStyle.borderNoGet,
            }">
            <img :src="item.pic" alt class="digGoods__box--content--good--img" />
            <div class="digGoods__box--content--good--imgShadow" v-if="item.isCheck">
              <i class="el-icon-check" style="color: white; font-size: 40px"></i>
            </div>
            <div class="digGoods__box--content--good--shopName">
              <div>{{ item.name }}</div>
              <div v-if="item.limitType === 0">
                <span v-if="item.minPrice > 0">￥{{ item.minPrice }}</span>
                <span v-else>￥{{ item.maxPrice }}</span>
              </div>
              <div v-else>￥{{ item.minPrice }}~￥{{ item.maxPrice }}</div>
            </div>
          </div>
        </div>
        <div class="digGoods__box--bottom">
          <el-checkbox v-model="allChecked" style="margin-top: 40px" @change="getAll">全选</el-checkbox>
          <PageManage :pageSize="search.size" :pageNum="search.current" :total="total"
            @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></PageManage>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Watch
} from "vue-property-decorator";
import PageManage from "@/components/PageManage.vue";
import {
  getCouponsGoods
} from "@/api/couponActivity/coupon";
import {
  getAllRegionList,
  getList
} from "@/api/good/goods";

  @Component({
    components: {
      PageManage,
    },
  })
export default class SelectGoods extends Vue {
    @Prop({
      type: String,
      default () {
        return "";
      },
    })
    /** 获取活动类型 */
    actType: any;

    @Prop({
      type: Array,
      default () {
        return [];
      },
    })
    pointGoodsList: any;

    @Prop({
      type: Boolean,
      default () {
        return false;
      },
    })
    goodsVisible: any;

    /** 弹框商品 */
    goodsList = [];

    /** 已选未确认商品 */
    selectpointGoodsList: any;

    // /** 分类选择 */
    // showList = [];

    // /** 默认选择状态 */
    // showVal = "";

    showSecList = [];

    /** 二级分类 */
    showSecVal = "";

    /** 销售专区 0商超 2秒杀 */
    modelList = [{
      value: "0",
      label: "商超",
    }, ];

    /** 默认选择状态 */
    modelVal = "";

    /** 分类选择 */
    showList = [];

    /** 默认选择状态 */
    showVal = "";

    saleMode = "";

    /** 全选 */
    allChecked = false;

    /** 分页信息 */
    total = 0;

    search = {
      maxPrice: "",
      minPrice: "",
      name: "",
      current: 1,
      size: 10,
      saleMode: "",
      showCategoryId: "",
    };

    @Watch("goodsVisible")
    watchList() {
      if (this.goodsVisible) {
        this.dealPointList();
      }
    }

    mounted() {
      this.selectpointGoodsList = this.pointGoodsList;
      getAllRegionList({}).then((res) => {
        this.showList = res.data;
        this.saleMode = res.data[0].id;
        this.getGoods();
      });
      this.onClear();
    }

    /**
     * 编辑是获取已选择过的数据
     */
    dealPointList() {
      this.goodsList.forEach((item) => {
        item.isCheck = false;
        this.selectpointGoodsList.forEach((pointItem) => {
          if (item.id === pointItem.id) {
            item.isCheck = true;
          }
        });
      });
    }

    /** 样式选择 */
    borderStyle = {
      borderGet: "2px solid #2D8CF0",
      borderNoGet: "2px solid #f2f2f2",
    };

    getGoods() {
      console.log(
        "pointGoodsList",
        this.pointGoodsList,
        this.selectpointGoodsList,
      );
      getCouponsGoods(this.search).then((res) => {
        res.data.list.forEach((item) => {
          item.isCheck = false;
          this.pointGoodsList.forEach((pointItem) => {
            if (item.id === pointItem.id) {
              item.isCheck = true;
            }
          });
        });
        this.goodsList = res.data.list;
        this.total = res.data.total;
      });
    }

    /**
     * 选择分类
     */
    selectTem(item) {
      this.saleMode = item.id;
      this.search.saleMode = this.saleMode;
      this.showSecList = [];
      this.search.showCategoryId = "";
      this.showSecVal = "";
      this.getUseEffectiveCategory();
    }

    async getUseEffectiveCategory() {
      const res = await getList({
        saleMode: this.saleMode
      });
      this.showSecList = res.data.list;
      this.getGoods();
    }

    /**
     * 选择二级分类后获取商品
     */
    selectGood(item) {
      this.search.showCategoryId = item.id;
      this.search.saleMode = this.saleMode;
      this.allChecked=false;
      this.getGoods();
    }

    onClear() {
      this.search.saleMode = "";
      this.showSecList = [];
      this.showSecVal = "";
      this.search.showCategoryId = "";
      this.getGoods();
    }

    /**
     * 选择输入框
     */
    searchByInput() {
      this.getGoods();
    }

    /** 选择商品 */
    chooseGood(item) {
      item.isCheck = !item.isCheck;
      if (item.isCheck) {
        const pointGoodsList = this.selectpointGoodsList;
        this.selectpointGoodsList = pointGoodsList.concat(item);
      } else {
        const pointGoodsList = this.selectpointGoodsList;
        this.selectpointGoodsList = pointGoodsList.filter((i) => {
          return i.id != item.id;
        });
      }
      if(this.selectpointGoodsList.length==this.goodsList.length){
       this.allChecked=true
       }
     else{
       this.allChecked=false
      }

      console.log(
        "pointGoodsList",
        this.pointGoodsList,
        this.selectpointGoodsList,
      );
    }

    /** 全选操作 */
    getAll() {
      if (this.allChecked) {
        const pointGoodsList = this.selectpointGoodsList ?
          this.selectpointGoodsList :
          [];
        this.selectpointGoodsList = this.goodsList.concat(pointGoodsList);
        console.log(pointGoodsList, this.goodsList);
      } else {
        const pointGoodsList = this.selectpointGoodsList;
        console.log(pointGoodsList, this.goodsList);
        this.selectpointGoodsList = this.goodsList.forEach((i) => {
          pointGoodsList.forEach((j) => {
            if (j.id) {
              return i.id != j.id;
            }
          });
        });
        this.selectpointGoodsList=[]
      }
      this.goodsList.map((item) => {
        return (item.isCheck = !this.allChecked ? false : true);
      });
    }

    /**
     * @method handleSizeChange
     * @description 每页 条
     */
    handleSizeChange(val) {
      this.search.size = val;
      this.allChecked=false;
      this.getGoods();
    }

    /**
     * @method handleCurrentChange
     * @description 当前页
     */
    handleCurrentChange(val) {
      this.search.current = val;
      this.allChecked=false;
      this.getGoods();
    }
}
</script>

<style lang="scss" scoped>
  .title {
    font-weight: bold;
    margin-top: -30px;
    margin-bottom: 20px;
  }

  @include b(digGoods) {
    border-top: 1px solid #d7d7d7;
    padding-top: 10px;

    @include e(box) {
      background-color: #f2f2f2;
      padding: 10px;

      @include m(top) {
        display: flex;
        justify-content: space-between;
      }

      @include m(content) {
        margin-top: 10px;
        background-color: white;
        border-radius: 5px;
        display: flex;
        flex-wrap: wrap;
        padding: 5px;

        @include m(good) {
          width: 33%;
          margin-left: 2px;
          margin-bottom: 4px;
          height: 80px;

          border-radius: 5px;
          padding: 5px;
          display: flex;

          @include m(img) {
            width: 65px;
            height: 65px;
            position: relative;
          }

          @include m(imgShadow) {
            width: 65px;
            height: 65px;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.6);
            @include flex(center, center);
          }

          @include m(shopName) {
            margin-left: 10px;
            padding-top: 5px;
            font-size: 12px;
            align-content: space-between;
          }
        }
      }

      @include m(bottom) {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .serachBtn {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dcdfe6;
    background-color: white;
    cursor: pointer;
    border-left: none;
    border-radius: 4px;
  }

  /deep/ .el-icon-loading {
    display: none;
  }
</style>